<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="assets/lib/layui/css/layui.css" />
        <link rel="stylesheet" href="assets/lib/cropper/cropper.css" />
        <link rel="stylesheet" type="text/css" href="assets/css/user_avatar.css" />
        <link rel="stylesheet" type="text/css" href="assets/css/hedpic.css" />
        <script src="assets/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
        <script src="assets/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
        <!-- 导入模板引擎 -->
        <script src="assets/lib/template-web.js" type="text/javascript" charset="utf-8"></script>
        <!-- 图片裁剪 -->
        <script src="assets/lib/cropper/Cropper.js" type="text/javascript" charset="utf-8"></script>
        <script src="assets/lib/cropper/jquery-cropper.js" type="text/javascript" charset="utf-8"></script>
        <!-- 富文本编辑器 -->
        <script src="assets/lib/tinymce/tinymce.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="assets/lib/tinymce/tinymce_setup.js" type="text/javascript" charset="utf-8"></script>
        <script src="assets/js/baseUrl.js" type="text/javascript" charset="utf-8"></script>


        <style type="text/css">
            .layui-form {
                padding-top: 30px;
                padding-right: 20px;
            }

            .layui-layedit {
                margin-left: 110px;
                margin-right: 20px;
            }

            .layui-card {
                background-color: #F2F3F5;
            }

            .outer-box {
                margin-left: 100px;
            }
        </style>
    </head>


    <body>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">文章标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <!-- 文章类别 -->
            <div class="layui-form-item">
                <label class="layui-form-label">文章类别</label>
                <div class="layui-input-block">
                    <select name="cate_id" id="classsel"></select>
                </div>
            </div>
        </form>


        <!-- 文本域 -->
        <div class="layui-form-item">
            <!-- 左侧的 label -->
            <label class="layui-form-label">文章内容</label>
            <!-- 为富文本编辑器外部的容器设置高度 -->
            <div class="layui-input-block" style="height: 400px;">
                <!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
                <textarea id="demo"></textarea>
            </div>
        </div>

        <!-- 卡片区域 -->
        <div class="layui-card">
            <div class="layui-card-header">文章封面</div>
            <div class="layui-card-body">
                <div class="outer-box">
                    <div class="cropper-box">
                        <img id="image" src="assets/images/sample.jpg" />
                    </div>

                    <!-- 预览区域 -->
                    <div class="preview-box">
                        <div class="img-preview w200"></div>
                        <p>100 x 100</p>

                    </div>
                </div>
                <!-- 底部按钮区域 -->
                <div class="btns">
                    <input type="file" name="file" id="pic" style="display: none;" />
                    <button class="layui-btn" id="acceptBtn">上传</button>
                    <button class="layui-btn layui-btn-danger" id="btnCreateAvatar" lay-filter='addFilter' lay-submit="">确定</button>
                </div>
            </div>
        </div>

    </body>


    <script type="text/html" id="tpl-cate">
        <option value="">请选择文章类别</option>
        {{each data}}
        <option value="{{$value.Id}}">{{$value.name}}</option>
        {{/each}}
    </script>


    <script type="text/javascript" src="assets/js/articlepub.js">

    </script>
</html>
